<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>仿小米首页</title>
	<link rel="stylesheet" href="../styles/header.css">
	<link rel="stylesheet" href="../styles/index.css">
	<link rel="stylesheet" href="../styles/footer.css">
	<script type="text/javascript" src="../styles/jquery.min.js"></script>
    <script type="text/javascript" src="../styles/index.js"></script>

</head>
<body>
    <div class="body">
    <!-- 导航条 -->
	<div id="header">
		<div class="header_mid">
		    <!-- 导航条左 -->
			<div class="header_mid_left">
			    <a href="">小米商城</a>
			    <span>|</span>
			    <a href="">MIUI</a>
			    <span>|</span>
			    <a href="">米聊</a>
			    <span>|</span>
			    <a href="">游戏</a>
			    <span>|</span>
			    <a href="">多看阅读</a>
			    <span>|</span>
			    <a href="">云服务</a>
			    <span>|</span>
			    <a href="">小米商城移动版</a>
			    <span>|</span>
			    <a href="">问题反馈</a>
			    <span>|</span>
			    <a href="">Select Region</a>				
			</div>
			<!-- 导航条右 -->
			<div class="header_mid_right">
				<a href="">登录</a>
				<span>|</span>
				<a href="">注册</a>
				<span>|</span>
				<a href="">消息通知</a>
				<!-- <div class="_icon_car"> -->
				
				<a  class="kong" href="">
				    <i class="icon-shouye5gouwuche"></i>购物车(0)
				    <span class="shopping">购物车中还没有商品，赶紧选购吧!</span>
				</a>
				<!-- </div> -->

			</div>
		</div>
	</div>
    <!-- header  stop -->
   
    <!-- 加个功能 点击小米手机  弹出下拉框 -->
    <div id="mi_phone">
        <div class="mi_phone_mid">
            <div class="site-topbar">
        	    <img src="../images/ccc.png" alt="" class="mi_img">
        	</div>
        	<div class="site-topbar-two">
        	   <img src="../images/ccc2.jpg" alt="" class="mi_img">
        	</div>
        	<div class="site-topbar-three">
        	   <img src="../images/ccc3.jpg" alt="" class="mi_img">
        	</div>
        	<div class="site-topbar-four">
        	   <img src="../images/ccc4.jpg" alt="" class="mi_img">
        	</div>
        	<div class="site-topbar-five">
        	   <img src="../images/ccc5.jpg" alt="" class="mi_img">
        	</div>
        	<div class="site-topbar-six">
        	   <img src="../images/ccc6.jpg" alt="" class="mi_img">
    	    </div>
    	</div>
    </div>

    <!-- 主体部分 --> 
    <div id="con">
        <!-- 搜索栏 -->
    	<div class="_con_search">
    	    <!-- 左 -->
    	    <div class="_con_left" style="float:left;">
    	    	<!-- 小米图标 -->
                <div class="_mi_logo" ><a href="" ><img  src="../images/mi-logo.png" alt=""></a></div>
                <!-- 信 息栏 -->
                <div class="_mid">
                <ul>
                	<li><a href="" class="_con_left_link mi_click">小米手机</a></li>
                	<li><a href="" class="_con_left_link mi_click">红米</a></li>
                	<li><a href="" class="_con_left_link mi_click">平板 · 笔记本</a></li>
                	<li><a href="" class="_con_left_link mi_click">电视</a></li>
                	<li><a href="" class="_con_left_link mi_click">盒子 · 影音</a></li>
                	<li><a href="" class="_con_left_link mi_click">路由器</a></li>
                	<li><a href="" class="_con_left_link">智能硬件</a></li>
                	<li><a href="" class="_con_left_link">服务</a></li>
                	<li>
                </ul>
                </div>
    	    </div>

    		<!-- 右 -->
    		<div class="_con_right" style="float:right;">
    		    <div class="all">
	    		    <input type="text" value="" class="r_input" id="search_ipt">
	    		    <div class="_con_right_a" >
	    		    	<a href="#" class="search_tip">小米MIX</a>
	    		    	<a href="#" class="search_tip">人工智能电视</a>
	    		    	<!-- 以上两个是排列的，用浮动来处理 -->
	    				<div style="clear:both;"></div>
	    		    </div>
	    		    <!-- 搜索按钮 -->
	    		    <div class="_con_right_button icon-sousuo" id="search_btn"></div>
	 
                </div>
    		</div>
       

    		<!-- 清除浮动 -->
	    	<div style="clear:both;"></div>
    	</div>

        <!-- 大模块1 -->
        <div class="_con_second_auto">
	        <div class="_con_second_left">
	        	<ul>
	        		<li class="box_list">
	        		    <a href="">手机 电话卡<i class="iconfont icon-xiayibu"></i></a>
	        		    <!-- 效果四：当鼠标移到li上面，从右边滑出弹框 -->
	        		    <div class="_img_right">
	        		        <img src="../images/ccc.png" alt="">
	        		        <img src="../images/ccc2.jpg" alt="">
	        		        <img src="../images/ccc3.jpg" alt="">
	        		        <img src="../images/ccc4.jpg" alt="">
	        		        <img src="../images/ccc5.jpg" alt="">
	        		        <img src="../images/ccc6.jpg" alt="">
	        		        <img src="../images/a.jpg" alt="">
	        		        <img src="../images/b.jpg" alt="">
	        		    </div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">笔记本 平板<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">22222</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">电视 盒子<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">33333</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">路由器 智能硬件<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">44444</div>
	        		</li>
	        		<li class="box_list">
	        		   <a href="">移动电源 电池 插线板<i class="iconfont icon-xiayibu"></i></a>
	        		   <div class="_img_right">555555</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">耳机 音箱<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">666666</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">保护套 贴膜<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">7777777</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">线材 支架 存储卡<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">888888</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">箱包 服饰<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">999999</div>
	        		</li>
	        		<li class="box_list">
	        		    <a href="">米兔 生活周边<i class="iconfont icon-xiayibu"></i></a>
	        		    <div class="_img_right">0000000</div>
	        		</li>
	        	</ul>
	        </div>
        

           <!-- 轮播图 -->
	        <div class="_con_second_right" id="div_img">
	        	<img src="../images/1.jpg" alt="" class="img">
	        	<img src="http://i3.mifile.cn/a4/xmad_14882707247713_mjdJt.jpg" alt="" class="img">
	        	<img src="http://i3.mifile.cn/a4/xmad_14882040011211_ryUsc.jpg" alt="" class="img">
	        	<img src="http://i3.mifile.cn/a4/xmad_1488334924335_SKXbH.jpg" alt="" class="img">
	        	<img src="http://i3.mifile.cn/a4/xmad_14883356727663_MIdEf.jpg" alt="" class="img">

                <!-- 加小圆点 -->
		        <ul class="click_list">
		        	<li class="li_list"></li>
		        	<li class="li_list"></li>
		        	<li class="li_list"></li>
		        	<li class="li_list"></li>
		        	<li class="li_list"></li>
		        </ul>

                <div class="btn_left"></div>
                <div class="btn_right"></div>

	        </div>

	        
		      
	        <!-- 清除浮动 -->
	        <div style="clear:both;"></div>        
        </div>
        <!-- 大模块1 结束 -->

        <!-- 模块2 -->
        <div class="_con_third">
            <div class="_box_width">
        	    <div class="_box">
	        		<a href=""><i class="iconfont icon-shouji"></i>选购手机</li></a>
	        	</div>
	        	
	        	<div class="_box">
	        		<a href=""><i class="iconfont icon-main"></i>企业团购</a>
	        	</div>
	        	
	        	<div class="_box">
	        		<a href=""><i class="iconfont icon-jieshao"></i>官翻产品</a>
	        	</div>	        	
	        	
	        	<div class="_box">
	        		<a href=""><i i class="iconfont icon-huiyuan"></i>小米移动</a>
	        		
	        	</div>
	        	
	        	<div class="_box">
	        		<a href=""><i i class="iconfont icon-wenjian"></i>以旧换新</a>
	        	</div>
	        	
	        	<div class="_box">
	        		<a href=""><i i class="iconfont icon-gift"></i>话费充值</a>	        
	      	    </div>
        	</div>
        	<img src="../images/3.jpg" alt="">
        	<img src="../images/4.jpg" alt="">
        	<img src="../images/5.jpg" alt="">
        </div>
        <!-- 清除浮动 -->
        <div style="clear:both;"></div> 

       	<!-- 小米明星单品 -->
        <div class="danpin">
            <div class="danpin_top">
	        	<h2>小米明星单品</h2>
	        	<span>&gt;</span><span class="_none">&lt;</span>
        	</div>
        	
        	<div class="danpin_img">  <!--这里设置居中-->

        	    <!-- 给小米明星单品做溢出隐藏效果 -->
                <div class="overflow">  <!--这里设置溢出隐藏-->
      
	        	    <div class="danpin_img_auto"  style="border-top:1px solid orange;">
		        	    <img src="../images/6.jpg" alt=""><br/>
		        	    <a href="" class="_danpin_link">米家LED智能台灯</a>
	                    <p>无可视频闪，亮度色温无级调节</p>
	                    <b>169元</b>
		        	</div>
		        	<div class="danpin_img_auto" style="border-top:1px solid lightgreen;">
		        	    <img src="../images/7.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">米家iHealth血压计</a>
	                    <p>爸妈上手就会用的智能血压计</p>
	                    <b>399元</b>
		            </div>
		        	<div class="danpin_img_auto" style="border-top:1px solid blue;">
		        	    <img src="../images/8.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米体重秤</a>
	                    <p>100克，喝杯水都可感知的精准</p>
	                    <b>99元</b>
		            </div>
		        	<div class="danpin_img_auto" style="border-top:1px solid red;">
		        	    <img src="../images/10.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米路由器3</a>
	                    <p>更快更强，不止四天线</p>
	                    <b>149元</b>
		            </div>
		        	<div class="danpin_img_auto" style="border-top:1px solid green;">
		        	   	<img src="../images/9.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米活塞耳机 清新版</a>
	                    <p>铝合金音腔，第三代平衡阻尼系统</p>
	                    <b>29元</b>
		        	</div>
		        	<div class="danpin_img_auto"  style="border-top:1px solid orange;">
		        	    <img src="../images/6.jpg" alt=""><br/>
		        	    <a href="" class="_danpin_link">米家LED智能台灯</a>
	                    <p>无可视频闪，亮度色温无级调节</p>
	                    <b>169元</b>
		        	</div>
		        	<div class="danpin_img_auto" style="border-top:1px solid lightgreen;">
		        	    <img src="../images/7.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">米家iHealth血压计</a>
	                    <p>爸妈上手就会用的智能血压计</p>
	                    <b>399元</b>
		            </div>
		        	<div class="danpin_img_auto" style="border-top:1px solid blue;">
		        	    <img src="../images/8.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米体重秤</a>
	                    <p>100克，喝杯水都可感知的精准</p>
	                    <b>99元</b>
		            </div>
		        	<div class="danpin_img_auto" style="border-top:1px solid red;">
		        	    <img src="../images/10.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米路由器3</a>
	                    <p>更快更强，不止四天线</p>
	                    <b>149元</b>
		            </div>
		        	<div class="danpin_img_auto" style="border-top:1px solid green;">
		        	   	<img src="../images/9.png" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米活塞耳机 清新版</a>
	                    <p>铝合金音腔，第三代平衡阻尼系统</p>
	                    <b>29元</b>
		        	</div>
		        	

	        	</div>
        	</div>
        </div> 		
 


	    <!-- 给小米明星单品做溢出隐藏效果 -->
    <!-- 	<div class="show_hide">
    		<div class="show_hide_mid">
    			<ul class="long">
    				<img src="../images/2.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/3.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/4.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/5.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/6.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/3.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/3.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/a.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/b.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/c.jpg" alt="" class="xiaomi_hide">
	                <img src="../images/b.jpg" alt="" class="xiaomi_hide">
	    			<img src="../images/c.jpg" alt="" class="xiaomi_hide">
    			</ul>
    		</div>
    	</div>
 -->
        
        

        <!-- 清除浮动 -->
        <div style="clear:both;"></div> 
        <!-- 模块2结束 -->

        <!-- 模块3   -->
        <div class="con_four">
            <!-- 居中模块 -->
         	<div class="con_four_mid">
         	    <div style="position: relative;">
         	    	
     	    		<div class="zhineng" style="color:#7F7F7F;">智能硬件</div>
     	    		<div class="_more">
     	    		    <a href="">查看全部<i class="iconfont icon-xiayibu"></i></a>
     	    		</div>
         	    	         	    	
         	    </div>
         	    <!-- 重复以上 -->
         	    <!-- 图片展示区 -->
         	    <div class="show_img">
         	        <!-- <div class="show_left"> -->
         	        	<img src="../images/a.jpg" alt="" class="show_left">
         	        <!-- </div> -->
         	        <div class="danpin_img_auto" >
		        	    <img src="../images/b.jpg" alt=""><br/>
		        	    <a href="" class="_danpin_link">米家LED智能台灯</a>
	                    <p>无可视频闪，亮度色温无级调节</p>
	                    <b>169元</b>
	        	    </div>
		        	<div class="danpin_img_auto">
		        	    <img src="../images/c.jpg" alt=""><br/>
		        	    <a href="" class="_danpin_link">米家iHealth血压计</a>
	                    <p>爸妈上手就会用的智能血压计</p>
	                    <b>399元</b>
		            </div>
		        	<div class="danpin_img_auto">
		        	    <img src="../images/d.jpg" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米体重秤</a>
	                    <p>100克，喝杯水都可感知的精准</p>
	                    <b>99元</b>
		            </div>
		            <div class="danpin_img_auto" style="margin-right:0;">
		        	    <img src="../images/j.jpg" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米体重秤</a>
	                    <p>100克，喝杯水都可感知的精准</p>
	                    <b>99元</b>
		            </div>
		        	<div class="danpin_img_auto two">
		        	    <img src="../images/e.jpg" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米路由器3</a>
	                    <p>更快更强，不止四天线</p>
	                    <b>149元</b>
		            </div>
		            <div class="danpin_img_auto two">
		        	    <img src="../images/e.jpg" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米路由器3</a>
	                    <p>更快更强，不止四天线</p>
	                    <b>149元</b>
		            </div>
		            <div class="danpin_img_auto two">
		        	    <img src="../images/f.jpg" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米路由器3</a>
	                    <p>更快更强，不止四天线</p>
	                    <b>149元</b>
		            </div>
		        	<div class="danpin_img_auto two" style="margin-right:0;">
		        	   	<img src="../images/h.jpg" alt="" ><br/>
		        	    <a href="" class="_danpin_link">小米活塞耳机 清新版</a>
	                    <p>铝合金音腔，第三代平衡阻尼系统</p>
	                    <b>29元</b>
		        	</div>
         	    	
         	    </div>
         		
         	</div>

         	<!-- 搭配 -->
            <div class="dapei_width">
                <div class="dapei_mid">
	                <h2 style="color:#7F7F7F;">搭配</h2>
				    <div class="dapei">
				        <img src="../images/dp1.jpg" alt="">
				      <!--   <a href="" class="_dp_link">小米移动电源5000mAh</a>
	                    <p>49元</p>
	                    <span>9.8万人评价</span> -->
				    </div>
				    <div class="dapei wenzi">
				       <img src="../images/dp2.jpg" alt="">
				       <a href="" class="_dp_link">小米移动电源5000mAh</a>
	                   <h5>149元</h5>
	                   <span>3910人评价</span>
				    </div>
				    <div class="dapei wenzi">
				       <img src="../images/dp3.jpg" alt="">
				       <a href="" class="_dp_link">小米移动电源5000mAh</a>
	                   <h5>149元</h5>
	                   <span>3910人评价</span>

				    </div>
				    <div class="dapei wenzi">
				       <img src="../images/dp4.jpg" alt="">
				       <a href="" class="_dp_link">20000mAh小米移动电源2</a>
	                   <h5>149元</h5>
	                   <span>1320人评价</span>
				    </div>
				    <div class="dapei wenzi" style="margin-right:0;">
				       <img src="../images/dp5.jpg" alt="">
				       <a href="" class="_dp_link">小米圈铁耳机Pro</a>
	                   <h5>29元</h5>
	                   <span>1万人评价</span>
				    </div>
				    <div class="dapei ">
				       <img src="../images/dp6.jpg" alt="">
				       <!-- <a href="" class="_dp_link">小米移动电源10000mAh高配版</a>
	                   <p>59元</p>
	                   <span>1.1万人评价</span> -->
				    </div>
				    <div class="dapei wenzi">
				       <img src="../images/dp7.jpg" alt="">
				       <a href="" class="_dp_link">小米活塞耳机 清新版</a>
	                   <h5>249元</h5>
	                   <span>1.8万人评价</span>

				    </div>
				    <div class="dapei wenzi">
				       <img src="../images/dp8.jpg" alt="">
				       <a href="" class="_dp_link">小米蓝牙耳机青春版</a>
	                   <h5>99元</h5>
	                   <span>74563人评价</span>

				    </div>
				    <div class="dapei wenzi func_last">
				        <img src="../images/dp9.jpg" alt="">
				        <a href="" class="_dp_link">小米小钢炮蓝牙音箱2</a>
	                    <h5>544元</p></h5>
	                    <span>2323人评价</span>

	                    <!-- 功能5  鼠标移到div上时，从下往上滑出小窗口 -->
	                    <div class="func">
	                   	   <span>音质不错,外观漂亮</span>
	                   	   <span>来自7943423的评价</span>
	                    </div>

				    </div>
				    <div class="dapei last" style="margin-right:0;"> 
				        <img src="../images/3.jpg" alt="">
				        <img src="../images/dp1.jpg" alt="">
				    </div>
			    </div>
            </div>


            <!-- 配件 -->
            <div class="dapei_width">
                <div class="dapei_mid">
	                <p>we</p>
	                <h2 style="color:#7F7F7F;">配件</h2>
				    <div class="dapei">
				        <img src="../images/pj1.jpg" alt="">
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/pj2.jpg" alt="">
				        <a href="" class="_dp_link">小米4c手机</a>
	                    <h5>599元</p></h5>
	                    <span>209人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/pj3.jpg" alt="">
				        <a href="" class="_dp_link">小米自拍杆(线控版)</a>
	                    <h5>29元</p></h5>
	                    <span>2.7万人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/pj4.jpg" alt="">
				        <a href="" class="_dp_link">小米手机5 钢化玻璃贴膜</a>
	                    <h5>29元</p></h5>
	                    <span>4.6万人评价</span>
				    </div>
				    <div class="dapei wenzi" style="margin-right:0;">
				        <img src="../images/pj5.jpg" alt="">
				        <a href="" class="_dp_link">红米4高配版 标准高透贴膜</a>
	                    <h5>19元</p></h5>
	                    <span>1615人评价</span>
				    </div>
				    <div class="dapei ">
				        <img src="../images/666.png" alt="">
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/pj7.jpg" alt="">
				        <a href="" class="_dp_link">小米标准高透贴膜</a>
	                    <h5>19元</p></h5>
	                    <span>4136人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/pj8.jpg" alt="">
				        <a href="" class="_dp_link">小米随身WIFI</a>
	                    <h5>19.9元</p></h5>
	                    <span>30.3万人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/pj9.jpg" alt="">
				        <a href="" class="_dp_link">小米5s plus标准高透贴膜</a>
	                    <h5>29元</p></h5>
	                    <span>23043人评价</span>
				    </div>
				    <div class="dapei last" style="margin-right:0;"> 
				        <img src="../images/3.jpg" alt="">
				        <img src="../images/pj1.jpg" alt="">
				    </div>
			    </div>
            </div>


            <!-- 清除浮动 -->
            <div style="clear:both;"></div>
            <!-- 周边 -->
            

            <div class="dapei_width">
                <div class="dapei_mid">
	                <!-- <p>we</p> -->
	                <h4 class="title" style="color:#7F7F7F;">周边</h4>	
	                <div class="zhoubian_right">
	                	<!-- <ul>
	                		<li><a href="" class="zhoubian_list">热门</a></li>
	                		<li><a href="" class="zhoubian_list">服装</a></li>
	                		<li><a href="" class="zhoubian_list">米兔</a></li>
	                		<li><a href="" class="zhoubian_list">生活周边</a></li>
	                		<li><a href="" class="zhoubian_list">箱包</a></li>
	                	</ul> -->
	                	<!-- 清除浮动-->
                        <div style="clear:both;"></div> 
	                </div>
				    <div class="dapei">
				        <img src="../images/zb1.jpg" alt="">
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/zb4.jpg" alt="">
				        <a href="" class="_dp_link">90分旅行箱 20寸</a>
	                    <h5>99元</p></h5>
	                    <span>2091人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/zb4.jpg" alt="">
				        <a href="" class="_dp_link">90分旅行箱 24寸</a>
	                    <h5>129元</p></h5>
	                    <span>2.7万人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/zb4.jpg" alt="">
				        <a href="" class="_dp_link">小米轻动系列白搭多用背包</a>
	                    <h5>39元</p></h5>
	                    <span>4326人评价</span>
				    </div>
				    <div class="dapei wenzi" style="margin-right:0;">
				        <img src="../images/zb5.jpg" alt="">
				        <a href="" class="_dp_link">红米4高配版 标准高透贴膜</a>
	                    <h5>19元</p></h5>
	                    <span>1615人评价</span>
				    </div>
				    <div class="dapei ">
				        <img src="../images/zb6.jpg" alt="">
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/zb5.jpg" alt="">
				        <a href="" class="_dp_link">小米标准高透贴膜</a>
	                    <h5>19元</p></h5>
	                    <span>4136人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/4.jpg" alt="">
				        <a href="" class="_dp_link">小米随身WIFI</a>
	                    <h5>19.9元</p></h5>
	                    <span>30.3万人评价</span>
				    </div>
				    <div class="dapei wenzi">
				        <img src="../images/3.jpg" alt="">
				        <a href="" class="_dp_link">小米5s plus标准高透贴膜</a>
	                    <h5>29元</p></h5>
	                    <span>23043人评价</span>
				    </div>
				    <div class="dapei last" style="margin-right:0;"> 
				        <img src="../images/3.jpg" alt="">
				        <img src="../images/pj1.jpg" alt="">
				    </div>
			    </div>
            </div>

            <!-- 清除浮动 -->
            <div style="clear:both;"></div>
    

          	<!-- 小米明星单品 -->
            <div class="danpin">
            <div class="danpin_top">
	        	<h2>为你推荐</h2>
	        	<span>&gt;</span><span class="_none">&lt;</span>
        	</div>
        	
        	<div class="danpin_img">
                <div class="overflow">
	        	    <div class="danpin_img_auto"  style="border-top:1px solid orange;">
		        	    <img src="../images/6.jpg" alt=""><br/>
		        	    <a href="" class="_danpin_link">米家LED智能台灯</a>
	                    <p>无可视频闪，亮度色温无级调节</p>
	                    <b>169元</b>
		        	</div>
		        	<div class="danpin_img_auto">
		        	    <img src="../images/7.png" alt="" style="border-top:1px solid lightgreen;"><br/>
		        	    <a href="" class="_danpin_link">米家iHealth血压计</a>
	                    <p>爸妈上手就会用的智能血压计</p>
	                    <b>399元</b>
		            </div>
		        	<div class="danpin_img_auto">
		        	    <img src="../images/8.png" alt="" style="border-top:1px solid blue;"><br/>
		        	    <a href="" class="_danpin_link">小米体重秤</a>
	                    <p>100克，喝杯水都可感知的精准</p>
	                    <b>99元</b>
		            </div>
		        	<div class="danpin_img_auto">
		        	    <img src="../images/10.png" alt="" style="border-top:1px solid red;"><br/>
		        	    <a href="" class="_danpin_link">小米路由器3</a>
	                    <p>更快更强，不止四天线</p>
	                    <b>149元</b>
		            </div>
		        	<div class="danpin_img_auto">
		        	   	<img src="../images/9.png" alt="" style="border-top:1px solid green;"><br/>
		        	    <a href="" class="_danpin_link">小米活塞耳机 清新版</a>
	                    <p>铝合金音腔，第三代平衡阻尼系统</p>
	                    <b>29元</b>
		        	</div>
                </div>
        	</div>
        </div> 		



            <!-- 清除浮动 -->
            <div style="clear:both;"></div>

            <!-- 热评产品 -->
            <div class="rp_chanpin">
            	<div class="rp_chanpin_mid">
            	    <p style="color:#7F7F7F;">热评产品</p>
            		<div class="php">
            		    <img src="../images/rp1.jpg" alt="">
            		    <a href="" class="_rp_link"> 
	            		    先五星好评。再来说说小米空气净化器，北方的天气雾霾越来越常态，
	            		    这就迫切需要一台性价比高的空气净化器
                        </a>
	                    <p>来自于 sddyboy 的评价</p>
	                    <a href="" class="_a_link">小米空气净化器2 <i>|</i> <span>699元</span></a> 
            		</div>
            		<div class="php">
            		    <img src="../images/rp2.jpg" alt="">
            		    <a href="" class="_rp_link">
	            		    样子好可爱，特别是转来转去时很有趣。让它休眠时它就会把头转过去背对着你了，
	            		    唤醒它又会自动转回来。你叫...
	            		    </a>
	                    <p>来自于 随风 的评价</p>
	                    <a href="" class="_a_link">米家小白智能摄像机 <i>|</i>  <span> 399元</span> </a> 
            		</div>
            		<div class="php">
            		    <img src="../images/rp3.jpg" alt="">
            		    <a href="" class="_rp_link">安装简洁方便，信号不错！！！！！</a>
	                    <p>来自于 追逆 的评价</p>
	                    <a href="" class="_a_link">小米路由器3 <i>|</i> <span>149元</span></a> 
            		</div>
            		<div class="php">
            		    <img src="../images/rp4.jpg" alt="" >
            		    <a href="" class="_rp_link">手机好用，反应快，价格适中，会常光顾，赞，五分好评！</a>
	                    <p>来自于 颜海平 的评价</p>
	                    <a href="" class="_a_link">小米Max全网通版 <i>|</i>  <span>1299元</span></a> 
            		</div>
            	</div>
            </div>


            <!-- 内容 -->
            <div class="main">
            	<div class="main_mid">
            	    <p>内容</p>
            		<div style="border-top:1px solid orange;" class="mysql father">
            			<h3>图书</h3>

            			<!-- 溢出隐藏 -->
            			<div class="longlong">

	            			<div class="mysql_son tttt">
		            			<a href="">哈利·波特与被诅咒的孩子</a>
		            			<a href="" class="main_second">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
		                        <a href="" class="main_last">29.37元</a>
		                        <img src="../images/tp1.png" alt="">
		                       
		                        <ul class="yuandian">
		                        	<li class="kongxin _radius"><i class="shixin">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        </ul>
		                        <div class="btn11-left">&lt;</div>
		                        <div class="btn11-right">&gt;</div>                        
		                    </div>
		                    <div class="mysql_son tttt">
		            			<a href="">哈利·波特与被诅咒的孩子</a>
		            			<a href="" class="main_second">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
		                        <a href="" class="main_last">29.37元</a>
		                        <img src="../images/tp1.png" alt="">
		                       
		                        <ul class="yuandian">
		                        	<li class="kongxin _radius"><i class="shixin">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        </ul>
		                        <div class="btn11-left">&lt;</div>
		                        <div class="btn11-right">&gt;</div>
		                                                    
		                    </div>
		                    <div class="mysql_son tttt">
		            			<a href="">哈利·波特与被诅咒的孩子</a>
		            			<a href="" class="main_second">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
		                        <a href="" class="main_last">29.37元</a>
		                        <img src="../images/tp1.png" alt="">
		                       
		                        <ul class="yuandian">
		                        	<li class="kongxin _radius"><i class="shixin">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        </ul>
		                        <div class="btn11-left">&lt;</div>
		                        <div class="btn11-right">&gt;</div>                        
		                    </div>
                        </div>                        
	                    
            		</div>

            		


            		<div style="border-top:1px solid lightgreen;" class="mysql father">

            		    <h3>MIUI主题</h3>

            		   <!--  <div class="longlong">

	            			<div class="mysql_son tttt">
		            			<a href="">哈利·波特与被诅咒的孩子</a>
		            			<a href="" class="main_second">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
		                        <a href="" class="main_last">29.37元</a>
		                        <img src="../images/tp1.png" alt="">
		                       
		                        <ul class="yuandian">
		                        	<li class="kongxin _radius"><i class="shixin">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        </ul>
		                        <div class="btn11-left">&lt;</div>
		                        <div class="btn11-right">&gt;</div>                        
		                    </div>
		                    <div class="mysql_son tttt">
		            			<a href="">哈利·波特与被诅咒的孩子</a>
		            			<a href="" class="main_second">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
		                        <a href="" class="main_last">29.37元</a>
		                        <img src="../images/tp1.png" alt="">
		                       
		                        <ul class="yuandian">
		                        	<li class="kongxin _radius"><i class="shixin">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        </ul>
		                        <div class="btn11-left">&lt;</div>
		                        <div class="btn11-right">&gt;</div>
		                                                    
		                    </div>
		                    <div class="mysql_son tttt">
		            			<a href="">哈利·波特与被诅咒的孩子</a>
		            			<a href="" class="main_second">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
		                        <a href="" class="main_last">29.37元</a>
		                        <img src="../images/tp1.png" alt="">
		                       
		                        <ul class="yuandian">
		                        	<li class="kongxin _radius"><i class="shixin">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        	<li class="kongxin"><i class="shixin dot">33</i></li>
		                        </ul>
		                        <div class="btn11-left">&lt;</div>
		                        <div class="btn11-right">&gt;</div>                        
		                    </div>
                        </div>                -->
            		    <div class="mysql_son">	
	            			<a href=""> bilibili拜年祭</a>
	            			<a href="" class="main_second">bilibili拜年祭</a>
	                        <a href="" class="main_last">免费</a>
	                        <img src="../images/tp2.jpg" alt="">
	                        <ul class="yuandian">
	                        	<li class="kongxin _radius"><i class="shixin">7</i></li>
	                        	<li class="kongxin"><i class="shixin dot">8</i></li>
	                        	<li class="kongxin"><i class="shixin dot">9</i></li>
	                        </ul>
	                     </div>
            		</div>
            		<div style="border-top:1px solid red;" class="mysql">
            		    <h3>游戏</h3>
            		    <div class="mysql_son">
	            		    <a href="">米柚手游模拟器</a>
	            			<a href="" class="main_second">在电脑上玩遍小米所有手游</a>
	                        <a href="" class="main_last">免费</a>
	                        <img src="../images/tp3.png" alt="">
	                        <ul class="yuandian">
	                        	<li class="kongxin _radius"><i class="shixin">1</i></li>
	                        	<li class="kongxin"><i class="shixin dot">2</i></li>
	                        	<li class="kongxin"><i class="shixin dot">3</i></li>
	                        </ul>
	                    </div>
            		</div>
            		<div style="border-top:1px solid blue;" class="mysql">
            		    <h3>应用</h3>
            		    <div class="mysql_son">	            			
	            			<a href=""> 2017金米奖</a>
	            			<a href="" class="main_second">最优秀的应用和游戏</a>
	            			<p style="width:276px;height:45px;"></p>
	                        <img src="../images/tp4.png" alt="">
	                        <ul class="yuandian">
	                        	<li class="kongxin _radius"><i class="shixin">4</i></li>
	                        	<li class="kongxin"><i class="shixin dot">5</i></li>
	                        	<li class="kongxin"><i class="shixin dot">6</i></li>
	                        </ul>
	                    
                        </div>
            		</div>
            	</div>
            </div>



            <!-- 视频 -->
            <div class="shipin">
            	<div class="shipin_mid">
            	    <p>视频</p>
            		<div>
            		    <img src="../images/ship1.jpg" alt="">
            		    <a href="" class="ship_link">红米Note 4X 环岛挑战</a>
            		    <span>看看我们关于超长续航的疯狂想法</span>
            		</div>
            		<div>
            		    <img src="../images/ship2.jpg" alt="">
            		    <a href="" class="ship_link">小米之家里发生了一件怪事</a>
            		    <span>World Order星机械人受邀访问地球</span>

            		</div>
            		<div>
            		    <img src="../images/ship3.jpg" alt="">
            		    <a href="" class="ship_link">小米MIX 概念手机背后的故事</a>
            		    <span>雷总亲自讲述小米MIX 的诞生</span>
            		</div>
            		<div>
            		    <img src="../images/ship4.jpg" alt="">
            		    <a href="" class="ship_link">一面科技，一面艺术</a>
            		    <span>梁朝伟讲述双面人生</span>
            		</div>
            	</div>
            </div>

        </div>
        <!-- 模块3 结束 -->



    </div>
    <!-- 主体结束 -->
   


    <!-- 帮助中心 -->
    <div class="help">
        <!-- 上 -->
    	<div class="help_top">
    	    
	    	<a href="" class="_help_list">预约维修服务</a>  
	    	<span style="color:#ccc;">|</span>	    	
	    	<a href="" class="_help_list">7天无理由退货</a>
	        <span style="color:#ccc;">|</span>  	    	
	    	<a href="" class="_help_list">15天免费换货</a>
	    	<span style="color:#ccc;">|</span>	    	
	    	<a href="" class="_help_list">满150元包邮</a>
	    	<span style="color:#ccc;">|</span>
	    	<a href="" class="_help_list">520余家售后网点</a>
    	</div>
        
        <!-- 下 -->
        <div class="help_bottom" style="margin-bottom:1000px;">
            <!-- 下 左 -->
            <div class="help_bottom_left">

                <div> 
                    <h3>帮助中心</h3>
                	<ul>                	  
                		<li class="_a_link">账户管理</li>
                		<li class="_a_link">购物指南</li>
                		<li class="_a_link">订单操作</li>
                	</ul>
                </div>
                <div>
                    <h3>服务支持</h3>
                	<ul>                	  
                		<li class="_a_link">售后政策</li>
                		<li class="_a_link">自助服务</li>
                		<li class="_a_link">相关下载</li>
                	</ul>
                </div>
                <div>
                	<h3>线下门店</h3>
                	<ul>                	  
                		<li class="_a_link">小米之家</li>
                		<li class="_a_link">服务网点</li>
                		<li class="_a_link">零售网点</li>
                	</ul>
                </div>
                <div>
                	<h3>关于小米</h3>
                	<ul>                	  
                		<li class="_a_link">了解小米</li>
                		<li class="_a_link">加入小米</li>
                		<li class="_a_link">联系我们</li>
                	</ul>
                </div>
                <div>
                	<h3>关注我们</h3>
                	<ul>                	  
                		<li class="_a_link">新浪微博</li>
                		<li class="_a_link">小米部落</li>
                		<li class="_a_link">官方微信</li>
                	</ul>
                </div>
                <div class="_last">
                	<h3>特色服务</h3>
                	<ul>                	  
                		<li class="_a_link">F 码通道</li>
                		<li class="_a_link">礼物码</li>
                		<li class="_a_link">防伪查询</li>
                	</ul>
                </div>
             	
            </div> 
            <!-- 下 右 -->
            <div class="help_bottom_right">
                <strong>400-100-5678</strong>
                <p>周一至周日 8:00-18:00<br/>（仅收市话费）</p> 
            	<a href=""><i class="iconfont icon-wendang"></i>24小时在线客服</a>
            </div>
        	
        </div>       

    </div>
    
    <!-- 帮助中心  stop -->

	
    
    <!-- 底部 -->
	<div id="footer">
	    <!--居中区块  -->
	    <div class="_bottom">
	        <!-- 上部 -->
	    	<div class="_bottom_top">
	    	    <!-- 上左 -->
	    	    <div class="_mi_logo bottom-logo">
	    	    	<img  src="../images/mi-logo.png" alt="">
	    	    </div>
	    	 	<div class="_bottom_top_left">
		    	 	<a href="" class="footer_link">小米商城</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">MIUI</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">米聊</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">多看书城</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">小米路由器</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">视频电话</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">小米后院</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">小米天猫店</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">小米淘宝直营店</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">小米网盟</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">小米移动</a>
		    	 	<span>|</span>
		    	 	<a href="" class="footer_link">Select Region</a>

		    	 	<ul>
		    	 		<li style="text-indent:-5px;"><a href="">©mi.com 京ICP证110507号</a> </li>
		    	 		<li><a href="">京ICP备10046444号</a><li>
		    	 		<li><a href="">京公网安备11010802020134号</a></li>
		    	 		<li><a href="">京网文[2014]0059-0009号</a></li>
	    	 		</ul>
		    	 	<p>	    	 	
		    	 		违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
		            <!-- TRUSTe Privacy Certification  诚信网站  可信网站  网上交易保障中心 -->
		            </p>
	    	 	</div>	    	 		
	    	 	
	    	 	<!-- 上右 -->
	    	 	<div class="_bottom_top_right">
                    <img src="../images/truste.png" alt="" class="top_r_one">
                    <img src="../images/v-logo-1.png" alt="" class="top_r_two">
                    <img src="../images/v-logo-2.png" alt="" class="top_r_three">
                    <img src="../images/v-logo-3.png" alt="" class="top_r_four">
	    	 	</div>

	    	 	


	    	</div>
            <!-- 清除浮动 -->
	    	<div style="clear:both;"></div>

	    	<!-- 下部 -->
	    	<div class="_bottom_bottom">
	    		<p class="_xioami">
	    			探索黑科技，小米为发烧而生!
	    		</p>
	    	</div>
	    </div>		
	</div>
	<!-- footer  stop -->

	</div>
</body>
</html>

<script type="text/javascript">
	
	document.getElementById('search_ipt').onfocus = function(){

		var tips = document.getElementsByClassName('search_tip');

		for(var i=0;i<tips.length;i++){
			tips[i].style.display = 'none';
		}

		document.getElementById('search_btn').style.border = "1px solid #f60";
		this.style.border = "1px solid #f60";
	};

	document.getElementById('search_ipt').onblur = function(){

		var tips = document.getElementsByClassName('search_tip');
		for(var i=0;i<tips.length;i++){
			tips[i].style.display = 'block';
		}

		document.getElementById('search_btn').style.border = "1px solid #ccc";
		this.style.border = "1px solid #ccc";
	};


</script>
